<template>
  <div class="news-card" @click="handleClick">
    <!-- 卡片内容区域 -->
    <div class="news-content">
      <!-- 标签 -->
      <div class="news-tags" v-if="tags && tags.length > 0">
        <span v-for="(tag, index) in tags.slice(0, 2)" :key="index" class="news-tag">{{ tag }}</span>
      </div>
      
      <!-- 标题 -->
      <h3 class="news-title">{{ title }}</h3>
      
      <!-- 来源和时间 -->
      <div class="news-meta">
        <div class="news-source-info">
          <img v-if="sourceIcon" :src="sourceIcon" alt="{{ source }}" class="source-icon">
          <span class="source-name">{{ source }}</span>
        </div>
        <span class="news-time">{{ formatTime(time) }}</span>
      </div>
      
      <!-- 摘要 -->
      <p class="news-brief">{{ brief }}</p>
      
      <!-- 统计数据 -->
      <div class="news-metrics">
        <button class="metric-item" @click.stop="handleLike">
          <svg class="metric-icon" :class="{ 'liked': isLiked }" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 21C19 19.9391 18.5786 18.9217 17.8284 18.1716C17.0783 17.4214 16.0609 17 15 17H9C7.93913 17 6.92172 17.4214 6.17157 18.1716C5.42143 18.9217 5 19.9391 5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M21 15C21 12.2386 19.4732 9.52678 17 7.72798C14.5268 5.92918 11.4732 5.92918 9 7.72798C6.5268 9.52678 5 12.2386 5 15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ isLiked ? (metrics?.likes || 0) + 1 : metrics?.likes || 0 }}</span>
        </button>
        <button class="metric-item" @click.stop="handleComment">
          <svg class="metric-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M21 15C21 19.9706 16.9706 24 12 24C7.02944 24 3 19.9706 3 15C3 10.0294 7.02944 6 12 6C13.8912 6 15.6912 6.58172 17.1213 7.58172L21 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>{{ metrics?.comments || 0 }}</span>
        </button>
        <button class="metric-item" @click.stop="handleBookmark">
          <svg class="metric-icon" :class="{ 'bookmarked': isBookmarked }" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 21L12 16L5 21V5C5 4.46957 5.21071 3.96086 5.58579 3.58579C5.96086 3.21071 6.46957 3 7 3H17C17.5304 3 18.0391 3.21071 18.4142 3.58579C18.7893 3.96086 19 4.46957 19 5V21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>收藏</span>
        </button>
        <button class="metric-item" @click.stop="handleShare">
          <svg class="metric-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4 12V19C4 20.1046 4.89543 21 6 21H18C19.1046 21 20 20.1046 20 19V12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M16 6L12 2L8 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12 2V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <span>分享</span>
        </button>
      </div>
    </div>
    
    <!-- 图片区域 -->
    <div class="news-media" v-if="imageUrl || videoUrl">
      <div class="media-container">
        <img v-if="imageUrl" :src="imageUrl" :alt="title" class="news-img">
        <div v-else class="video-placeholder">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="white" xmlns="http://www.w3.org/2000/svg">
            <circle cx="12" cy="12" r="10" fill="rgba(0,0,0,0.5)"/>
            <path d="M8 5V19L19 12L8 5Z" fill="white"/>
          </svg>
        </div>
        <!-- 多图标识 -->
        <div class="multi-image-indicator" v-if="imageCount > 1">
          <span>{{ imageCount }}图</span>
        </div>
      </div>
    </div>
    
    <!-- 悬停效果遮罩 -->
    <div class="news-hover-overlay"></div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  source: {
    type: String,
    required: true
  },
  sourceIcon: {
    type: String,
    default: ''
  },
  time: {
    type: String,
    required: true
  },
  brief: {
    type: String,
    required: true
  },
  imageUrl: {
    type: String,
    default: ''
  },
  videoUrl: {
    type: String,
    default: ''
  },
  imageCount: {
    type: Number,
    default: 1
  },
  metrics: {
    type: Object,
    default: () => ({ views: 0, comments: 0, likes: 0 })
  },
  tags: {
    type: Array,
    default: () => []
  },
  id: {
    type: String,
    default: ''
  }
});

// 交互状态
const isLiked = ref(false);
const isBookmarked = ref(false);

// 格式化时间
const formatTime = (timeString) => {
  // 这里可以实现更复杂的时间格式化逻辑
  const now = new Date();
  const newsTime = new Date(timeString);
  const diffInMinutes = Math.floor((now - newsTime) / (1000 * 60));
  
  if (diffInMinutes < 1) {
    return '刚刚';
  } else if (diffInMinutes < 60) {
    return `${diffInMinutes}分钟前`;
  } else if (diffInMinutes < 1440) {
    return `${Math.floor(diffInMinutes / 60)}小时前`;
  } else {
    return `${Math.floor(diffInMinutes / 1440)}天前`;
  }
};

// 处理点击事件
const handleClick = () => {
  // 导航到新闻详情页
  router.push(`/news/${props.id}`);
};

// 处理点赞
const handleLike = () => {
  isLiked.value = !isLiked.value;
  // 这里可以添加实际的点赞/取消点赞逻辑
  console.log(isLiked.value ? '点赞' : '取消点赞');
};

// 处理评论
const handleComment = () => {
  // 可以直接跳转到评论区或显示评论对话框
  console.log('查看评论');
  router.push(`/news/${props.id}#comments`);
};

// 处理收藏
const handleBookmark = () => {
  isBookmarked.value = !isBookmarked.value;
  // 这里可以添加实际的收藏/取消收藏逻辑
  console.log(isBookmarked.value ? '收藏' : '取消收藏');
};

// 处理分享
const handleShare = () => {
  // 显示分享面板或复制链接
  console.log('分享新闻');
};
</script>

<style scoped>
.news-card {
  display: flex;
  background-color: var(--card-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
  transition: all var(--transition-normal);
  border: 1px solid var(--border-color);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  min-height: 160px;
}

/* 悬停效果 */
.news-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-light);
}

.news-card:hover .news-hover-overlay {
  opacity: 0.03;
}

/* 内容区域 */
.news-content {
  flex: 1;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 标签 */
.news-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.news-tag {
  padding: 2px 8px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 500;
}

/* 标题 */
.news-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0 0 12px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--transition-fast);
}

.news-card:hover .news-title {
  color: var(--primary-color);
}

/* 元信息 */
.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.news-source-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.source-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

.source-name {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

.news-time {
  font-size: 12px;
  color: var(--text-muted);
}

/* 摘要 */
.news-brief {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 统计数据 */
.news-metrics {
  display: flex;
  gap: 20px;
  align-items: center;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 4px 8px;
  border-radius: var(--radius-full);
}

.metric-item:hover {
  color: var(--primary-color);
  background-color: var(--primary-light-hover);
}

.metric-icon {
  transition: all var(--transition-fast);
}

.metric-item:hover .metric-icon {
  transform: scale(1.1);
}

/* 点赞状态 */
.metric-icon.liked {
  fill: var(--error-color);
  color: var(--error-color);
}

/* 收藏状态 */
.metric-icon.bookmarked {
  fill: var(--warning-color);
  color: var(--warning-color);
}

/* 媒体区域 */
.news-media {
  width: 200px;
  flex-shrink: 0;
}

.media-container {
  position: relative;
  width: 100%;
  height: 120px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.news-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.news-card:hover .news-img {
  transform: scale(1.05);
}

/* 视频占位符 */
.video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--secondary-light), var(--primary-light));
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 多图标识 */
.multi-image-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
}

/* 悬停遮罩 */
.news-hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  opacity: 0;
  transition: opacity var(--transition-fast);
  pointer-events: none;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .news-card {
    flex-direction: column;
    min-height: auto;
    padding: 16px;
  }
  
  .news-content {
    padding-right: 0;
    margin-bottom: 12px;
  }
  
  .news-title {
    font-size: 16px;
  }
  
  .news-brief {
    -webkit-line-clamp: 3;
  }
  
  .news-media {
    width: 100%;
  }
  
  .media-container {
    height: 160px;
  }
}

@media (max-width: 480px) {
  .news-card {
    padding: 12px;
  }
  
  .news-metrics {
    gap: 12px;
  }
  
  .metric-item {
    font-size: 12px;
  }
  
  .media-container {
    height: 120px;
  }
}
</style>